<template>
	<view>
		<u-navbar title-color="#FFFFFF" back-icon-color="#FFFFFF" title="物流信息" :background="background"
			@rightClick="rightClick" :autoBack="true">
		</u-navbar>
		<view class="flex-col detail">
			<view class="flex-row group_5">
				<view class="section_1"> </view>
				<text class="text_3">物流信息</text>
			</view>
			<text class="text_4">{{options.company}} （{{options.no}}）</text>
			<view class="divider"></view>
			<view class="wrap">
				<u-time-line>
					<u-time-line-item nodeTop="2">
						<template v-slot:node>
							<view class="u-node" style="background: #19be6b;">
								<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
							</view>
						</template>
						<template v-slot:content>
							<view>
								<view class="u-order-title">{{state_text[state]}}</view>
								<view class="u-order-desc">{{data[0]['context']}}</view>
								<view class="u-order-time">{{data[0]['time']}}</view>
							</view>
						</template>
					</u-time-line-item>
					<u-time-line-item v-for="(item,index) in data" :key="index" v-if="index != 0">
						<template v-slot:content>
							<view>
								<view class="u-order-desc">{{item.context}}</view>
								<view class="u-order-time">{{item.time}}</view>
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				state:0,
				data:[1,2,3],
				state_text:[
					'在路上',
					'揽收',
					'疑难件',
					'已签收',
					'已退签',
					'派送中',
					'退回中',
					'转投中',
					'清关中',
					'未知状态9',
					'未知状态10',
					'未知状态11',
					'未知状态12',
					'未知状态13',
					'已拒签',
				],
				options:{},
				background: {
					backgroundColor: '#00C785',
				}
			}
		},
		onLoad(options = {}) {
		
			// vk.callFunction({
			// 	url: 'client/user/kh/logisticsQuery',
			// 	title: '拼命加载中...',
			// 	data: {
			// 		num: options.no,
			// 		phone: options.mobile,
			// 	}
			// }).then((data) => {
			// 	if (data.code == 0 && data.data.status == "200") {
			// 		that.data = data.data.data;
			// 		that.state = data.data.state;
			// 	} else {
			// 		vk.toast('暂无物流信息~')
			// 	}
			// }).catch((err) => {
			// 	vk.toast('网络开小差了~')
			// });
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.detail {
		margin: 30rpx ;
		padding: 30rpx 0 0rpx;
		background-color: rgb(255, 255, 255);
		box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.05);
		border-radius: 16rpx;

		.group_5 {
			color: rgb(34, 34, 34);
			font-size: 28rpx;
			font-weight: 500;
			line-height: 40rpx;
			white-space: nowrap;

			.section_1 {
				margin: 10rpx 0;
				background-color: rgb(0, 199, 133);
				border-radius: 0px 6rpx 6rpx 0px;
				width: 6rpx;
				height: 20rpx;
			}

			.text_3 {
				margin-left: 24rpx;
			}
		}

		.text_4 {
			margin-left: 30rpx;
			margin-top: 20rpx;
			color: rgb(153, 153, 153);
			font-size: 24rpx;
			font-weight: 500;
			line-height: 33rpx;
			white-space: nowrap;
		}

		.divider {
			margin: 20rpx 30rpx 0;
			background-color: rgb(238, 238, 238);
			height: 2rpx;
		}

		.wrap {
			padding: 24rpx 24rpx 24rpx 40rpx;
		}
		
		.u-node {
			width: 44rpx;
			height: 44rpx;
			border-radius: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #d0d0d0;
		}
		
		.u-order-title {
			color: #333333;
			font-weight: bold;
			font-size: 32rpx;
		}
		
		.u-order-title.unacive {
			color: rgb(150, 150, 150);
		}
		
		.u-order-desc {
			color: rgb(150, 150, 150);
			font-size: 28rpx;
			margin-bottom: 6rpx;
		}
		
		.u-order-time {
			color: rgb(200, 200, 200);
			font-size: 26rpx;
		}
		
		.tel {
			color: $u-type-primary;
		}
	}
</style>
